import React, { useState } from'react';
import './qjx_huan.css';
import { useNavigate } from "react-router-dom";
import { RightOutline } from 'antd-mobile-icons'
const AddPatient = () => {
    // 表单状态管理
    const [patientName, setPatientName] = useState('');
    const [idNumber, setIdNumber] = useState('');
    const [gender, setGender] = useState('男');
    const [birthDate, setBirthDate] = useState('');
    const [weight, setWeight] = useState('');
    const [allergyHistory, setAllergyHistory] = useState('无');
    const [allergyDetails, setAllergyDetails] = useState('');
    const [medicalHistory, setMedicalHistory] = useState('无');
    const [medicalDetails, setMedicalDetails] = useState('');
    const [liverFunction, setLiverFunction] = useState('正常');
    const [kidneyFunction, setKidneyFunction] = useState('正常');
    const [pregnancyStatus, setPregnancyStatus] = useState('无');

    const handleSubmit = (e) => {
        e.preventDefault();
        // 收集表单数据
        const patientData = {
            patientName,
            idNumber,
            gender,
            birthDate,
            weight,
            allergyHistory,
            allergyDetails,
            medicalHistory,
            medicalDetails,
            liverFunction,
            kidneyFunction,
            pregnancyStatus
        };

        // 获取现有的患者数据
        let existingPatients = localStorage.getItem('patients');
        existingPatients = existingPatients? JSON.parse(existingPatients) : [];

        // 添加新的患者数据
        existingPatients.push(patientData);

        // 将更新后的数据保存到 localStorage
        localStorage.setItem('patients', JSON.stringify(existingPatients));

        console.log('患者数据已保存到缓存:', existingPatients);
    };
    const navigate = useNavigate();
    const tiao=()=>{
        navigate('/qjx_huan')
    }
    return (
        <form className="qq_add-patient-form" onSubmit={handleSubmit}>
            <div className="qq_form-group">
                <label>患者姓名</label>
                <input type="text" placeholder="请填写真实姓名" value={patientName} onChange={(e) => setPatientName(e.target.value)} />
            </div>
            <div className="qq_form-group">
                <label>患者身份证号</label>
                <input type="text" placeholder="请填写身份证号" value={idNumber} onChange={(e) => setIdNumber(e.target.value)} />
            </div>
            <div className="qq_form-group">
                <label>性别</label>
                <div className="qq_radio-group">
                    <label>
                        <input type="radio" value="男" checked={gender === '男'} onChange={() => setGender('男')} /> 男
                    </label>
                    <label>
                        <input type="radio" value="女" checked={gender === '女'} onChange={() => setGender('女')} /> 女
                    </label>
                </div>
            </div>
            <div className="qq_form-group">
                <label>出生日期</label>
                <input type="date" value={birthDate} onChange={(e) => setBirthDate(e.target.value)} />
            </div>
            <div className="qq_form-group">
                <label>体重 (kg)</label>
                <input type="number" placeholder="请输入体重" value={weight} onChange={(e) => setWeight(e.target.value)} />
            </div>
            <div className="qq_form-group">
                <label>过敏史</label>
                <div className="qq_radio-group">
                    <label>
                        <input type="radio" value="无" checked={allergyHistory === '无'} onChange={() => setAllergyHistory('无')} /> 无
                    </label>
                    <label>
                        <input type="radio" value="有" checked={allergyHistory === '有'} onChange={() => setAllergyHistory('有')} /> 有
                    </label>
                </div>
                {allergyHistory === '有' && (
                    <textarea placeholder="请填写过敏药物(非常重要)" value={allergyDetails} onChange={(e) => setAllergyDetails(e.target.value)} maxLength={20} />
                )}
            </div>
            <div className="qq_form-group">
                <label>过往病史</label>
                <div className="qq_radio-group">
                    <label>
                        <input type="radio" value="无" checked={medicalHistory === '无'} onChange={() => setMedicalHistory('无')} /> 无
                    </label>
                    <label>
                        <input type="radio" value="有" checked={medicalHistory === '有'} onChange={() => setMedicalHistory('有')} /> 有
                    </label>
                </div>
                {medicalHistory === '有' && (
                    <textarea placeholder="请填写过往病史" value={medicalDetails} onChange={(e) => setMedicalDetails(e.target.value)} maxLength={50} />
                )}
            </div>
            <div className="qq_form-group">
                <label>肝功能</label>
                <div className="qq_radio-group">
                    <label>
                        <input type="radio" value="正常" checked={liverFunction === '正常'} onChange={() => setLiverFunction('正常')} /> 正常
                    </label>
                    <label>
                        <input type="radio" value="异常" checked={liverFunction === '异常'} onChange={() => setLiverFunction('异常')} /> 异常
                    </label>
                </div>
            </div>
            <div className="qq_form-group">
                <label>肾功能</label>
                <div className="qq_radio-group">
                    <label>
                        <input type="radio" value="正常" checked={kidneyFunction === '正常'} onChange={() => setKidneyFunction('正常')} /> 正常
                    </label>
                    <label>
                        <input type="radio" value="异常" checked={kidneyFunction === '异常'} onChange={() => setKidneyFunction('异常')} /> 异常
                    </label>
                </div>
            </div>
            <div className="qq_form-group">
                <label>备孕情况</label>
                <div className="qq_radio-group">
                    <label>
                        <input type="radio" value="无" checked={pregnancyStatus === '无'} onChange={() => setPregnancyStatus('无')} /> 无
                    </label>
                    <label>
                        <input type="radio" value="备孕中" checked={pregnancyStatus === '备孕中'} onChange={() => setPregnancyStatus('备孕中')} /> 备孕中
                    </label>
                    <label>
                        <input type="radio" value="怀孕中" checked={pregnancyStatus === '怀孕中'} onChange={() => setPregnancyStatus('怀孕中')} /> 怀孕中
                    </label>
                    <label>
                        <input type="radio" value="哺乳中" checked={pregnancyStatus === '哺乳中'} onChange={() => setPregnancyStatus('哺乳中')} /> 哺乳中
                    </label>
                </div>
            </div>
            <button type="submit" className="qq_submit-button" onClick={tiao}>确定</button>
        </form>
    );
};

export default AddPatient;